/**
 * Created by MingIr on 2017/1/18.
 * @author:bjzhang
 */

import React,{ Component } from 'react';
import {
    View,
    TextInput,
    Text,
    StyleSheet,
    TouchableHighlight,
} from 'react-native';
import PHead from '../module/header';

export default class BuyChestKey extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <View style={styles.container}>
                <PHead title='获取钥匙' leftIcon={require('../../icon/camera/camera_icon_back.png')}></PHead>
                <View style={styles.packetWrap}>
                    <View style={styles.priceInputWrap}>
                        <Text style={styles.priceFont}>宝箱钥匙：</Text>
                        <TextInput
                            underlineColorAndroid='transparent'
                            value='1'
                            editable={false}
                            keyboardType='numeric'
                            style={[styles.priceInput,{textAlign:'left'}]}></TextInput>
                        <TextInput
                            underlineColorAndroid='transparent'
                            value='0.99'
                            editable={false}
                            keyboardType='numeric'
                            style={styles.priceInput}></TextInput>
                        <Text style={styles.priceFont}>元</Text>
                    </View>
                    <View style={styles.priceTxWrap}>
                        <Text style={styles.priceText}>¥</Text>
                        <Text style={styles.priceText}>0.99</Text>
                    </View>
                    <View>
                        <TouchableHighlight style={styles.payButton}>
                            <Text style={styles.payButtonText}>微信安全支付</Text>
                        </TouchableHighlight>
                    </View>
                    <View>
                        <Text style={styles.tipText}>
                            宝箱钥匙可通过其他用户点赞积累免费获得
                        </Text>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#fff',
        flexDirection:'column',
        justifyContent:'space-between',
    },
    packetWrap:{
        flex:1,
        backgroundColor:'#fff',
        flexDirection:'column',
        justifyContent:'flex-start',
        paddingLeft:15,
        paddingRight:15,
        paddingTop:21,
    },
    priceInputWrap:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        padding:20,
    },
    priceInput:{
        flex:1,
        textAlign:'right',
        fontSize:17,
        color:'rgba(95,100,132,1)',
        padding:0,
        paddingRight:20,
        textAlignVertical:'center',
    },
    priceFont:{
        fontSize:17,
        color:'#5F6484',
    },
    priceText:{
        fontSize:36,
        color:'#5F6484',
    },
    payButton:{
        backgroundColor:'rgba(82,211,100,1)',
        paddingTop:14,
        paddingBottom:14,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:4,
    },
    payButtonText:{
        color:'#FFFFFF',
        fontSize:18,
    },
    priceTxWrap:{
        padding:20,
        paddingTop:30,
        alignItems:'center',
        justifyContent:'center',
        flexDirection:'row',
    },
    tipText:{
        marginTop:20,
        color:'#B0B2C2',
        fontSize:12,
        textAlign:'center',
    },
});